iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 11
0
Modern Web

線上讀書會-2016 年學 JavaScript 是一種什麼樣的體驗系列 第 11

學習 Reactjs 搭配 express ,nextjs,meteor

  • 分享至 

  • xImage
  •  

Reactjs 是一個前端的framework通常會選一個後端做restful的搭配,前後端是可以完全分離的

但是通常會把 Reactjs 跟 webserver綁在一起,這邊介紹 nodejs 的一個套件 express

與一些 framework Next.js 與 Meteor

這邊推薦線上讀書會之前默司大大主講的 這邊 express 入門篇

https://www.youtube.com/watch?v=Lo-PP6cUO7c

express 的重點整理

使用express是彈性很大,但意味著什麼元件都要自己來拼跟校調

var http = require('http'); //需要使用 http來createServer
var express = require('express');  //使用express
var app=express(); // 實例化
var server=http.createServer(app);
server.listen(port,function(){  console.log('啟動嚕port是'+port) });

一個基本的express就大概如上,中間影片也有提到一些函式庫的引用與middewave的概念,大家有興趣的可以看看默司大大的影片

接下來要跟大家介紹的之前 一村 介紹 next.js 篇

https://www.youtube.com/watch?v=tHDd7GYdxpM

這個框架包含了 universal server-render的部分 是使用檔案結構目錄的方式簡單配置檔案,就可以完成很複雜的universal,next.js算還滿新的這邊介紹給大家可以選擇 reactjs搭配的 framework之一

https://zeit.co/blog/next 官網網站

學習重點心得

可以參考 楊興大大的這一篇主講 可以幫助你去了解什麼是 universal server-render

https://www.youtube.com/watch?v=tqRkdVzjh8Q

next.js 目前小型專案 非常推薦如果需要有seo又不想做一大推設定,很適合想要快速開發的朋友,但目前還是很新的玩意兒,所以大家再評估一下

最後要跟大家介紹的好東東是 meteor

https://www.youtube.com/watch?v=7Y999tiPz_g

meteor 的入門與使用都不會太難,非常的穩定與好用,如果有興趣可以參考 MAX 之前在線上讀書會的主講

https://www.meteor.com/tutorials/blaze/creating-an-app

學習重點心得

  1. Creating an app
    安裝後 可以跑一個專案 meteor create simple-todos
    基本架構目錄
client/main.js        # client端進入點
client/main.html      # 主樣板
client/main.css       # 定義Css檔案
server/main.js        # server端進入點
package.json          # 套件管理
.meteor               # Meteor內部files
.gitignore            # git設定忽略檔案

以上是安裝後基本的架構
2. Templates
這邊會提到在根目錄 多一個import的資料結構,方便前後端使用因為meteor也是universal server-render
可以學習到 tempalte的引用 還有樣板的邏輯判斷寫法

...
     {{#each tasks}}     //迴圈 tasks取Template.body.helpers 的 tasks
        {{> task}}       // > 是要引用樣板的意思
      {{/each}}
...
<template name="task">   // 這裡就是被引用的樣板
  <li>{{text}}</li>
</template>
...
...
Template.body.helpers({           //注意body會對應到樣板的<body>
  tasks: [
    { text: 'This is task 1' },
    { text: 'This is task 2' },
    { text: 'This is task 3' },
  ],
});
...
  1. Collections
    這邊會提及mongodb的使用方法並在終端及如何去插入一筆資料,備註一下mongodb本身有clientmongo跟servermongo 這邊兩邊都要配置到
  2. Forms and events
    表格與事件的使用表格就會定義在樣板裡,event 的話也是透過Template.body.events 樣去去監聽樣板中有沒有被點選之類的
  3. Update and remove
    多加一些新增與刪除的功能,基本上幫助更能理解如何使用
  4. Running on mobile
    尚未攻略
  5. Temporary UI state
    這邊介紹 ReactiveDict 這個臨時存放 state的部分,
  6. Adding user accounts
    meteor 提供了一個這樣使用者帳號登入的套件可以使用安裝非常的簡單方便
  7. Security with methods
    一開始使用基礎的build project 會有一些安全性的問題,因為meteor 希望使用可以快速上手,這邊我們要把安全性一個加回去,首先要做的就是把meteor remove insecure 這個不安全套件移除,其他就跟著做,接下來會再訂一些方法,之前4的部分會有個 tasks.insert 這樣其實是很不安全的,所以會有加一層定義一個method然後再去call method,在call method可以加入 form的檢查與權限的檢查
  8. Publish and subscribe
    因為在meteor裡面做所有的操作都會有autopublish的功能,一樣對主機的安全性不好,所以這邊使用了meteor remove autopublish 先把autopublish 移除掉,然後在一個個去看哪些可以server 可以Publish 提供client subscribe
  9. Testing
    內建使用 mocha 與 chai斷言庫 來做一個 unit Test
  10. Next steps
    還有其他的範例可以玩歐 ^^
    meteor create --example todos
    meteor create --example localmarket

上一篇
2016 學 webpack ..經驗分享
下一篇
12/17 andy 大大 線上 9點到17點 教你入門 react-redux
系列文
線上讀書會-2016 年學 JavaScript 是一種什麼樣的體驗30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言